<script setup lang="ts">
  import { HMessage, HMessageBox } from '@/components/common/message'
  import useCheckFlowNodeFormService from '@/services/pages/base-info/useCheckFlowNodeFormService'
  import { FormInstance } from 'element-plus'
  import moment from 'moment'
  import { ref, watch } from 'vue'
  import useCheckFlowNodeDetailService from '@/services/pages/base-info/useCheckFlowNodeDetailService'
  import useOrganizeEmpListService from '@/services/module/organize/useOrganizeEmpListService'

  const {
    organizeEmpList,
    getOrganizeEmpListParam,
    getOrganizeEmpListLoading,
    getOrganizeEmpList,
  } = useOrganizeEmpListService()
  const { checkFlowNodeDetail, getCheckFlowNodeDetailLoading, getCheckFlowNodeDetail } =
    useCheckFlowNodeDetailService()
  const {
    checkFlowNodeFormSaveLoading,
    checkFlowNodeForm,
    resetCheckFlowNodeForm,
    checkFlowNodeFormSave,
  } = useCheckFlowNodeFormService()

  defineOptions({
    name: 'CheckFlowNodeFormModal',
  })

  const props = defineProps({
    nodeId: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
    (e: 'close'): void
  }>()

  const visible = defineModel<boolean>('modelValue', { default: false })
  const formInstance = ref<FormInstance | null>(null)
  const rules = {
    nodeName: [{ required: true, message: '请输入节点名称', trigger: ['blur', 'change'] }],
    empIds: [{ required: true, message: '请选择OA账号', trigger: ['blur', 'change'] }],
  }

  const hideDialog = () => {
    resetCheckFlowNodeForm()
    visible.value = false
    emits('close')
  }

  const onConfirmClick = async () => {
    try {
      if (!formInstance.value) return
      await formInstance.value.validate()
      if (!props.nodeId) {
        checkFlowNodeForm.value.gmtCreate = moment().format('YYYY-MM-DD HH:mm:ss')
      }
      checkFlowNodeForm.value.gmtUpdate = moment().format('YYYY-MM-DD HH:mm:ss')
      const res = await checkFlowNodeFormSave(props.nodeId)
      if (res) {
        if (res.code === 20000) {
          HMessage.success('操作成功')
          hideDialog()
          emits('update')
          return
        }

        HMessageBox.error(res.message)
        return
      }

      HMessageBox.error('节点保存失败，请稍后重试')
    } catch (error) {
      // error
    }
  }

  watch(visible, async (value) => {
    if (value) {
      getOrganizeEmpListParam.value.limit = 10000
      getOrganizeEmpList()

      if (props.nodeId) {
        await getCheckFlowNodeDetail(props.nodeId)
        checkFlowNodeForm.value = checkFlowNodeDetail.value
        checkFlowNodeForm.value.gmtUpdate = moment(checkFlowNodeDetail.value.gmtUpdate).format(
          'YYYY-MM-DD HH:mm:ss',
        )
      }
    }
  })
</script>

<template>
  <h-dialog
    v-model="visible"
    :title="props.nodeId ? '编辑节点' : '添加节点'"
    :loading="
      checkFlowNodeFormSaveLoading || getOrganizeEmpListLoading || getCheckFlowNodeDetailLoading
    "
    @close="hideDialog"
  >
    <el-form
      ref="formInstance"
      :model="checkFlowNodeForm"
      inline-message
      label-position="top"
      class="modal_form_content"
      :rules="rules"
    >
      <el-form-item label="节点名称" prop="nodeName">
        <el-input v-model.trim="checkFlowNodeForm.nodeName" placeholder="请输入节点名称" />
      </el-form-item>

      <el-form-item label="OA账号" prop="empIds">
        <el-select
          v-model="checkFlowNodeForm.empIds"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="3"
          placeholder="请选择OA账号"
        >
          <el-option
            v-for="(option, optionIndex) in organizeEmpList"
            :key="optionIndex"
            :label="option.name"
            :value="option.empId"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <h-button is-modal type="primary" @click="onConfirmClick">确定</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>
